<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        :index="1"
        width="55"
      />
      <el-table-column
        prop="id"
        label="学号"
        width="135"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
      />
      <el-table-column
        prop="sex"
        label="性别"
        width="60"
      />
      <el-table-column
        prop="height"
        label="身高"
        width="70"
      >
        <template slot-scope="scope">
          <el-input v-if="showItems[scope.$index]" v-model="scope.row.height" type="text" class="item" placeholder="身高" />
          <div v-else class="txt">{{ scope.row.height }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="weight"
        label="体重"
        width="60"
      >
        <template slot-scope="scope">
          <el-input v-if="showItems[scope.$index]" v-model="scope.row.weight" type="text" class="item" placeholder="体重" />
          <div v-else class="txt">{{ scope.row.weight }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="pulmonary"
        label="肺活量"
        width="80"
      >
        <template slot-scope="scope">
          <el-input v-if="showItems[scope.$index]" v-model="scope.row.pulmonary" type="text" class="item" placeholder="肺活量" />
          <div v-else class="txt">{{ scope.row.pulmonary }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="run50"
        label="50米跑"
        width="70"
      >
        <template slot-scope="scope">
          <el-input v-if="showItems[scope.$index]" v-model="scope.row.run50" type="text" class="item" placeholder="50米跑" />
          <div v-else class="txt">{{ scope.row.run50 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="jump"
        label="立定跳远"
        width="80"
      >
        <template slot-scope="scope">
          <el-input v-if="showItems[scope.$index]" v-model="scope.row.jump" type="text" class="item" placeholder="立定跳远" />
          <div v-else class="txt">{{ scope.row.jump }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="flexion"
        label="坐位体前屈"
        width="95"
      >
        <template slot-scope="scope">
          <el-input v-if="showItems[scope.$index]" v-model="scope.row.flexion" type="text" class="item" placeholder="坐位体前屈" />
          <div v-else class="txt">{{ scope.row.flexion }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="run800"
        label="800米跑"
        width="90"
      >
        <template slot-scope="scope">
          <el-input v-if="scope.row.sex == '女' && showItems[scope.$index]" v-model="scope.row.run800" type="text" class="item" placeholder="800米跑" />
          <div v-else class="txt">{{ scope.row.run800 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="run1000"
        label="1000米跑"
        width="90"
      >
        <template slot-scope="scope">
          <el-input v-if="scope.row.sex == '男' && showItems[scope.$index]" v-model="scope.row.run1000" type="text" class="item" placeholder="1000米跑" />
          <div v-else class="txt">{{ scope.row.run1000 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="abdominal_curl"
        label="1分钟仰卧起坐"
        width="120"
      >
        <template slot-scope="scope">
          <el-input v-if="scope.row.sex == '女' && showItems[scope.$index]" v-model="scope.row.abdominal_curl" type="text" class="item" placeholder="1分钟仰卧起坐" />
          <div v-else-if="scope.row.sex == '女'" class="txt">{{ scope.row.abdominal_curl }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="pull_up"
        label="引体向上"
        width="100"
      >
        <template slot-scope="scope">
          <el-input v-if="scope.row.sex == '男' && showItems[scope.$index]" v-model="scope.row.pull_up" type="text" class="item" placeholder="引体向上" />
          <div v-else-if="scope.row.sex == '男'" class="txt">{{ scope.row.pull_up }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="left_eye"
        label="左眼"
        width="100"
      >
        <template slot-scope="scope">
          <el-input v-if="showItems[scope.$index]" v-model="scope.row.left_eye" type="text" class="item" placeholder="左眼" />
          <div v-else class="txt">{{ scope.row.left_eye }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="right_eye"
        label="右眼"
        width="100"
      >
        <template slot-scope="scope">
          <el-input v-if="showItems[scope.$index]" v-model="scope.row.right_eye" type="text" class="item" placeholder="右眼" />
          <div v-else class="txt">{{ scope.row.right_eye }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="end_sorce"
        label="最终分数"
        width="120"
      />
      <!-- <el-table-column
        prop="zip"
        label="等级"
        width="120"
      /> -->
      <el-table-column
        fixed="right"
        label="操作"
        width="130"
      >
        <template slot-scope="scope">
          <el-button v-if="!showItems[scope.$index]" type="text" @click="edit(scope.$index)">编辑</el-button>
          <el-button v-else type="text" @click="cancel(scope.$index)">取消</el-button>
          <el-button v-if="showItems[scope.$index]" type="text" @click="save(scope.$index)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as teacher from '@/api/teacher.js'
// import { parse } from 'path-to-regexp'
const needD = ['height', 'weight', 'pulmonary', 'run50', 'jump', 'flexion', 'run800', 'run1000', 'abdominal_curl', 'pull_up', 'left_eye', 'right_eye']
const iToName = {
  'height': '身高',
  'weight': '体重',
  'pulmonary': '肺活量',
  'run50': '50米跑',
  'jump': '立定跳远',
  'flexion': '坐位体前屈',
  'run800': '800米跑',
  'run1000': '1000米跑',
  'abdominal_curl': '一分钟仰卧起坐',
  'pull_up': '引体向上',
  'left_eye': '左眼',
  'right_eye': '右眼'
}
export default {

  data() {
    return {
      tableData: null,
      showItems: [],
      listLoading: true
    }
  },
  created() {
    if (this.$route.query.row && localStorage.task) {
      console.log(this.$route.query.row)
      this.c_id = this.$route.query.row.id
      this.task_id = this.$route.query.task_id
      if (this.c_id) this.fetchData(this.c_id)
      else this.$router.push('/teacher/task')
    } else this.$router.push('/teacher/task')
  },
  methods: {
    fetchData(c_id) {
      this.listLoading = true
      teacher.selectByCId({ c_id }).then(response => {
        this.tableData = response.data
        console.log(this.tableData)
        this.backData = this.tableData.map(o => ({ ...o }))
        this.showItems = Array(this.tableData.length).fill(false)
        this.listLoading = false
      })
    },
    /** 编辑数据 */
    edit(index) {
      this.showItems.splice(index, 1, true)
    },
    /** 保存数据 */
    save(index) {
      var tdata = { ...this.tableData[index] }
      tdata.task_id = this.task_id
      if (this.submit(tdata)) {
        this.showItems.splice(index, 1, false)
        this.backData[index] = { ...this.tableData[index] }
      }
    },
    /** 撤销修改 */
    cancel(index) {
      this.tableData[index] = { ...this.backData[index] }
      this.showItems.splice(index, 1, false)
    },
    submit(tdata) {
      if (this.checkData(tdata)) {
        tdata.remarks = ''
        const task = JSON.parse(localStorage.task)
        let grade = parseInt(task.time - tdata.grade)
        console.log(task.time, task.term, grade)
        if (task.term === 2) grade = (grade + 1)
        grade = grade >= 2 ? 1 : 0
        console.log(tdata, grade)
        teacher.edit({ score: tdata, grade: grade }).then(res => {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          console.log(res.data)
        })
        return true
      } else return false
    },
    checkData(tdata) {
      const errors = []
      for (const index in tdata) {
        tdata[index] = String(tdata[index])
        if (tdata[index] === 'undefined' || tdata[index] === 'null') {
          console.log(tdata['sex'] === '男', tdata[index], index)
          if ((index === 'run800' && tdata['sex'] === '男') || (index === 'run1000' && tdata['sex'] === '女')) continue
          else if (index === 'abdominal_curl' && tdata['sex'] === '男' || (index === 'pull_up' && tdata['sex'] === '女')) continue
          else if (['end_sorce', 'name', 'sex', 'id'].includes(index)) continue
          else errors.push(iToName[index] + '没有填写')
        } else {
          if (['run800', 'run1000'].includes(index)) {
            const stmp = tdata[index].split('\'')
            if (stmp.length >= 2) { tdata[index] = parseInt(stmp[0]) * 60 + parseInt(stmp[1]) } else tdata[index] = parseInt(stmp[0]) * 60
          } else if (needD.includes(index) && tdata[index] !== '缺' && tdata[index] !== '免') {
            tdata[index] = parseFloat(tdata[index])
          }
        }
      }
      if (errors.length > 0) {
        let mes = ''
        for (const i in errors) { mes = mes + errors[i] + '<br>' }
        this.$notify({
          title: '提示',
          dangerouslyUseHTMLString: true,
          message: mes,
          duration: 0
        })
        return false
      } else return true
    }
  }
}
</script>
<style lang='scss'>
  .item{
    width: 100px;
    /* 调整elementUI中样式 如果不需要调整请忽略 */
    .el-input__inner{
      height: 24px!important;
    }
  }
  .txt{
    line-height: 24px;
    padding: 0 9px;
    box-sizing: border-box;
  }
</style>
